<template>
  <v-container fluid>
    <v-layout row wrap justify-center align-content-center>
      <div class="card-container" v-for="(item, index) in HTMLList" :key="index">
        <v-card width="200" tile hover :to="'/notes/' + item.filename">
          <!-- <v-card-media height="100" src='http://www.villepohjola.fi/wp-content/uploads/DSC1596-2.jpg'></v-card-media> -->
          <v-card-title primary-title>{{ item.filename }}</v-card-title>
          <v-card-text>{{ item.updatets }}</v-card-text>
        </v-card>
      </div>
    </v-layout>
  </v-container>
</template>

<script>
import VueMarkdown from 'vue-markdown'
export default {
  name: 'notes',
  components: {
    VueMarkdown
  },
  data () {
    return {
      markdown_source: { filename: 'http://datageek.top/test.md' }
    }
  },
  computed: {
    source () {
      return this.$store.state.notes.source
    },
    mdList () {
      return this.$store.state.notes.notesList
    },
    rawHTML () {
      return this.$store.state.notes.rawHTML
    },
    HTMLList () {
      return this.$store.state.notes.htmlList
    }
  },
  methods: {
  },
  beforeMount () {
    // this.$store.dispatch('getMdList')
    this.$store.dispatch('getHTMLList')
    // this.$store.dispatch('getMDSource')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  padding: 5px 0;
}
.card-container {
  padding: .5em;
}
</style>
